<template>
  <view class="footerball-page">
    <view class="footerball-banner">
      <image src="@/static/img/userPage/userPage.png" mode=""></image>
    </view>
    <view class="footerball-popular">
      <view class="popular-top">
        <view class="popular-left">
          <image src="@/static/icon/collectPage/expert.png" mode=""></image>
          <view class="">热门专家</view>
        </view>
        <view class="popular-right">
          <view class="">查看排行榜</view>
          <u-icon name="arrow-right" color="#134177"></u-icon>
        </view>
      </view>
      <view class="popular-main">
        <view class="popular-expert" v-for="item,index in expertList" :key="index" @click="onPerson">
          <view class="expert-img">
            <image src="../../static/icon/userPage/promotion2.png" mode=""></image>
            <view class="expert-num" v-if="item.isNum">在售{{item.num}}</view>
          </view>
          <view class="expert-name">{{item.name}}</view>
          <view class="expert-title solid" v-show="item.solid">{{item.solid}}</view>
          <view class="expert-title hollow" v-show="item.hollow">{{item.hollow}}</view>
        </view>
      </view>
      <view class="popular-selling">
        <view class="selling-tabs">
          <u-tabs :list="tabsList" lineColor="#134177" :activeStyle="{
            color: '#134177',
            fontWeight: 'bold',
            fontSize:'36rpx'
        }" :inactiveStyle="{
            color: '#909090',
            fontSize:'32rpx'
        }">
            <view slot="right" style="display: flex; color:#909090; align-items: center">
              <view>筛选</view>
              <image src="@/static/icon/collectPage/screen.png" mode=""></image>
            </view>
          </u-tabs>
        </view>
        <view class="list-content">
          <mescroll-uni @init="mescrollInit" @down="downCallback" @up="upCallback" :fixed="false">
            <view class="item" v-for="(item, index) in dataList" :key="index" @click="goDetail">
              <view class="selling-list">
                <view class="selling-top">
                  <view class="selling-img">
                    <image src="../../static/icon/userPage/more3.png" mode=""></image>
                  </view>
                  <view class="selling-content">
                    <view class="selling-name">sugar man</view>
                    <view class="selling-solid">9连红</view>
                    <view class="selling-hollow">近9中9</view>
                  </view>
                  <view class="selling-title">
                    <view>95
                      <view class="span">%</view>
                    </view>
                    <view>近15场命中率</view>
                  </view>
                </view>
                <view class="selling-nav">
                  <view class="selling-review">
                    <view class="review-text">主推信心：</view>
                    <image src="@/static/icon/collectPage/star.png" mode="" v-for="item,index in 5" :key="index">
                    </image>
                  </view>
                  <view class="review-nav">
                    【情报】【亚洲杯小组赛首轮】成功9连红，昨日亚洲杯3中
                    2！今晚继续关注亚洲杯小组赛，解析韩国VS巴林的亚洲成功9连红，昨日亚洲杯3中
                    2！今晚继续关注亚洲杯小组赛，解析韩国VS巴林的亚洲…
                  </view>
                  <view class="review-competition">
                    <view class="competition-nav">
                      <view class="competition-label">让球</view>
                      <view class="competition-title">今天19:30 亚洲杯丨韩国VS巴林</view>
                    </view>
                  </view>
                  <view class="review-price">
                    <view class="price-time">3小时前发布</view>
                    <view class="price-num">188金币</view>
                  </view>
                </view>
              </view>
            </view>
          </mescroll-uni>
        </view>

      </view>
    </view>
  </view>
</template>

<script>
  import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
  import {
    footballList,
    mockList
  } from './mock.js'
  export default {
    mixins: [MescrollMixin],
    data() {
      return {
        dataList: [],
        tabsList: [{
          name: '今日热卖',
        }, {
          name: '连红',
        }, {
          name: '近期爆红'
        }, {
          name: '稳定盈利'
        }],
        expertList: []
      };
    },
    created() {
      this.footballListApi()
    },
    methods: {
      onPerson(){
        uni.navigateTo({
          url:'/pages/collectPage/person-home'
        })
      },
      async footballListApi() {
        const res = await footballList()
        if (res && res.code === 200) {
          this.expertList = res.data
        }
      },


      // 列表查询-------------------------------
      upCallback(page) {
        mockList(page.num, page.size).then((data) => {
          console.log(data, 11111111);
          let listData = data.listData
          let listLen = listData.length
          let totalPage = data.totalPage
          let totalSize = data.totalSize
          if (page.num == 1) this.dataList = []
          this.dataList = this.dataList.concat(listData)
          this.mescroll.endByPage(listLen, totalPage)
        })
      },
      // 搜索区域-------------------------------
      doSearch() {
        this.dataList = []
        this.mescroll.resetUpScroll()
      },
      openPopup() {
        this.showPopup = true
      },
      change(e) {
        this.searchTimer && clearTimeout(this.searchTimer)
        this.searchTimer = setTimeout(() => {
          this.doSearch()
        }, 300)
      },
      search() {
        this.doSearch()
      }
    },
  };
</script>

<style lang="less" scoped>
  // @import url('@/pages/common/css/list.less');
  .footerball-banner {
    width: 690rpx;
    height: 170rpx;
    border-radius: 10rpx;
    overflow: hidden;
    margin-top: 30rpx;

    image {
      width: 690rpx;
      height: 170rpx;
    }
  }

  .footerball-popular {
    margin-top: 36rpx;

    .popular-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 44rpx;
      width: 100%;

      .popular-left {
        font-size: 32rpx;
        font-weight: 500;
        color: #134177;
        display: flex;

        image {
          height: 42rpx;
          width: 46rpx;
          margin-right: 20rpx;
        }
      }

      .popular-right {
        font-size: 28rpx;
        font-weight: 500;
        color: #134177;
        display: flex;

        u-icon {
          margin-left: 10rpx;
        }
      }
    }

    .popular-main {
      width: 690rpx;
      height: 422rpx;
      background: #fff;
      border: 4px solid #5881B2;
      opacity: 1;
      border-radius: 10rpx;
      margin-top: 22rpx;
      display: flex;
      flex-wrap: wrap;
      align-items: center;

      .popular-expert {
        height: 170rpx;
        width: 25%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;

        .expert-img {
          width: 94rpx;
          height: 94rpx;
          border-radius: 50%;
          position: relative;

          image {
            width: 94rpx;
            height: 94rpx;
            border-radius: 50%;
          }

          .expert-num {
            position: absolute;
            left: 50%;
            bottom: -6rpx;
            transform: translateX(-50%);
            width: 78rpx;
            height: 32rpx;
            background: rgba(47, 126, 252);
            border-radius: 16rpx;
            z-index: 1;
            font-size: 20rpx;
            font-weight: bold;
            line-height: 32rpx;
            color: #FFFFFF;
            text-align: center;
          }
        }

        .expert-name {
          font-size: 24rpx;
          font-weight: 500;
          color: #313131;
          margin-top: 8rpx;
        }

        .expert-title {
          box-sizing: border-box;
          padding: 0 10rpx;
          height: 32rpx;
          border: 2px solid #FF5353;
          border-radius: 2rpx 10rpx 2rpx 10rpx;
          font-size: 20rpx;
          font-weight: bold;
          line-height: 26rpx;
          text-align: center;
          margin-top: 4rpx;
        }

        .solid {
          background: rgba(255, 83, 83);
          color: #FFFFFF;
        }

        .hollow {
          color: #FF5353;
        }

      }
    }

    .popular-selling {
      margin-top: 30rpx;

      .selling-tabs {
        position: sticky;
        padding-top: var(--status-bar-height);
        top: 0;
        left: 0;
        z-index: 99;
        background-color: #FCFBF9;

        image {
          height: 26rpx;
          width: 26rpx;
        }
      }

      .selling-list {
        background: url(@/static/img/collectPage/selling.png) no-repeat;
        width: 690rpx;
        border-radius: 10rpx;
        box-sizing: border-box;
        padding: 20rpx 10rpx 10rpx 10rpx;
        margin-top: 20rpx;

        .selling-top {
          display: flex;

          .selling-img {
            width: 66rpx;
            height: 66rpx;
            border-radius: 50%;

            image {
              width: 66rpx;
              height: 66rpx;
              border-radius: 50%;
            }
          }

          .selling-content {
            flex: 1;
            display: flex;
            align-items: center;
            margin-left: 14rpx;

            .selling-name {
              font-size: 24rpx;
              font-weight: 500;
              color: #FFFFFF;
            }

            .selling-solid {
              width: 78rpx;
              height: 32rpx;
              background: rgba(255, 83, 83);
              border-radius: 2rpx 10rpx 2rpx 10rpx;
              font-size: 20rpx;
              font-weight: bold;
              line-height: 32rpx;
              color: #FFFFFF;
              text-align: center;
              margin-left: 14rpx;
            }

            .selling-hollow {
              width: 90rpx;
              height: 32rpx;
              background: rgba(255, 255, 255);
              border: 2px solid #FF5353;
              border-radius: 2rpx 10rpx 2rpx 10rpx;
              font-size: 20rpx;
              font-weight: bold;
              line-height: 28rpx;
              color: #FF5353;
              text-align: center;
              margin-left: 12rpx;
            }
          }

          .selling-title {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            color: #FAE3BF;
            font-weight: 500;

            :first-child {
              font-size: 40rpx;
              display: flex;
              align-items: baseline;

              .span {
                font-size: 20rpx;

              }
            }

            :last-child {
              font-size: 20rpx;
            }
          }
        }

        .selling-nav {
          width: 670rpx;
          height: 264rpx;
          background: rgba(255, 255, 255);
          border-radius: 10rpx;
          margin-top: 14rpx;
          box-sizing: border-box;
          padding-top: 14rpx;

          .selling-review {
            width: 670rpx;
            height: 36rpx;
            background: linear-gradient(88deg, #FFEBA7 0%, rgba(255, 239, 195, 0.49) 55%, rgba(255, 240, 208, 0.37) 100%);
            box-sizing: border-box;
            padding: 0 20rpx;
            display: flex;
            align-items: center;

            .review-text {
              font-size: 20rpx;
              font-weight: 400;
              color: #C48E44;
            }

            image {
              height: 22rpx;
              width: 22rpx;
            }
          }

          .review-nav {
            height: 68rpx;
            box-sizing: border-box;
            padding: 0 12rpx;
            margin-top: 16rpx;
            font-size: 24rpx;
            font-weight: 500;
            line-height: 34rpx;
            color: #313131;
            display: -webkit-box;
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
          }

          .review-competition {
            height: 58rpx;
            box-sizing: border-box;
            padding: 0 10rpx;
            margin-top: 16rpx;

            .competition-nav {
              width: 100%;
              height: 100%;
              background: rgba(245, 245, 245);
              border-radius: 10rpx;
              display: flex;
              align-items: center;
              box-sizing: border-box;
              padding: 0 10rpx;

              .competition-label {
                width: 90rpx;
                height: 32rpx;
                background: rgba(255, 255, 255, 0.39);
                border: 2px solid #FF5353;
                border-radius: 16rpx;
                font-size: 20rpx;
                font-weight: bold;
                line-height: 32rpx;
                color: #FF5353;
                text-align: center;
              }

              .competition-title {
                width: 100%;
                font-size: 24rpx;
                font-weight: 500;
                color: #909090;
                margin-left: 12rpx;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
              }
            }
          }

          .review-price {
            margin-top: 12rpx;
            padding: 0 10rpx 10rpx;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .price-time {
              font-size: 24rpx;
              font-weight: 400;
              color: #909090;
            }

            .price-num {
              font-size: 24rpx;
              font-weight: 500;
              color: #FF5353;
            }
          }
        }
      }
    }
  }
</style>